<template>
	<div >
		<!--面包屑导航-->
		<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 10px;">
			  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			  <el-breadcrumb-item>权限管理</el-breadcrumb-item>
			  <el-breadcrumb-item>视频列表</el-breadcrumb-item>
		</el-breadcrumb>
		<h2 style="text-align: center;">视频播放页面</h2>
		
		<!--<video id="video1" width="420" src="../../assets/bnin-004_chihiro_akiba.mp4" controls="controls">
		</video><br />-->
		<!--<el-button type="primary" circle>播放/暂停</el-button>
		<el-button type="info" circle>终止</el-button><br />-->
		<img style="position: relative;left: 50%;right: 50%;transform: translate(-50%,-20%);" src="../../assets/image/loli.gif">
		<br />
		<!--小卡片-->
		<!--v-for="(item,i) in videoList-->
		<div v-for="(item,i) in videoList"  class='video_card'>
			<el-card>
				<img src="../../assets/image/loli.gif"></image>
				{{item.desc}}直播中。。。<br>
				<a href="">点击进入</a>
			</el-card>

		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return {
			videoList:[
			{id:1,name:'',path:'',image:'../../assets/image/01.jpg',desc:'LOLI'},
			{id:2,name:'',path:'',image:'../../assets/image/01.jpg',desc:'LOLI'},
			{id:3,name:'',path:'',image:'../../assets/image/01.jpg',desc:'LOLI'},
			{id:4,name:'',path:'',image:'../../assets/image/01.jpg',desc:'LOLI'},
			{id:5,name:'',path:'',image:'../../assets/image/01.jpg',desc:'LOLI'},
			{id:6,name:'',path:'',image:'../../assets/image/01.jpg',desc:'LOLI'}
			]
			}
		},
		methods:{
			
		}
		
	}
</script>

<style>
	.video_card{
		float: left;
		display: inline-block;
		width: 30%;
		height: 400px;
		margin: 10px;
		border: solid 1px black;
	}
	el-card{
		margin: 0;
	}
	image{
		width: 30%;
	}
</style>